<template>
	<u-swipe-action
		:index="index" 
		:options="options"
		:show="show"
		@click="onClick"
		@open="onOpen"
		v-if="!!conversation"
	>
		<view class="chat u-border-bottom" @tap="toChat(conversation)">
			<view class="avatar">
				<u-avatar :src="avatarImg" mode="square" size="100"></u-avatar>
				<view v-if="conversation.unread" class="badge" :class="{gray:conversation.isMute}">
					{{conversation.unread>99?'99+':conversation.unread}}
				</view>
				<!-- <u-badge :type="?'info':'error' " :count="" is-center></u-badge> -->
			</view>
			<view class="content">
				<view class="u-flex u-row-between">
					<text class="u-font-30  u-line-1" style="max-width: 460rpx; font-weight: 400; color: black;" >{{ conversation.remarks||conversation.name }}</text>
					<text class="u-font-24" v-if="conversation.lastTime">{{conversation.lastTime|dateDiff}}</text>
				</view>
				<view class="u-flex u-row-between">
					<view class="u-flex-1 u-line-1 u-font-28" style="width: 200rpx;height: 1.3em;">
						<text class="text-blue" style="line-height: 1.3em;" v-if="conversation.mention">[{{conversation.mentionAll?'@所有人':'有人@你'}}]</text><text class="text-gray" style="line-height: 1.3em;" v-if="conversation.lastMessage">{{conversation.lastMessage}}</text>
					</view>
					<view class="u-m-l-10" style="flex-shrink: 0;">
						<text v-if="conversation.isTop" class="iconfont text-gray u-font-36 icon-nail "></text>
						<text v-if="conversation.isMute" class="iconfont text-gray u-font-36 icon-notice_forbid"></text>
					</view>
				</view>
			</view>
		</view>
	</u-swipe-action>
</template>

<script>
	import {jumpTo,dateDiff,toast,getNetworkType,openAppSetting} from "@/utils/util.js"
	import {formatTime} from "@/utils/data.js"
	import { ConversationType } from "@/entity/ConversationType"
	import systemAPI from "@/api/system.js"
	export default{
		props:{
			conversation:{
				type:Object,
				required:true
			},
			index:{
				type:Number
			},
			show:{
				type:Boolean,
				default:false
			}
		},
		computed:{
			options(){
				if(this.conversation.isTop){
					return [
						{
							text: '取消置顶',
							event:'cancelTop',
							style: {
								backgroundColor: '#0081ff',
								whiteSpace:'nowrap'
							}
						},
						{
							text: '删除',
							event:'remove',
							style: {
								backgroundColor: '#dd524d'
							}
						}
					]
				}else{
					return [
						{
							text: '置顶',
							event:'toTop',
							style: {
								backgroundColor: '#0081ff',
								whiteSpace:'nowrap'
							}
						},
						{
							text: '删除',
							event:'remove',
							style: {
								backgroundColor: '#dd524d'
							}
						}
					]
				}
			},
			avatarImg(){
				if(this.conversation.type==ConversationType.Single){
					return this.conversation._target&&(this.conversation._target.saveAvatar||this.conversation._target.avatarUrl)||this.conversation.avatar
				}
				if(this.conversation.type==ConversationType.Group){
					return this.conversation._target&&(this.conversation._target.saveAvatar||this.conversation._target.avatar)||this.conversation.avatar
				}
				return this.conversation.avatar
			}
		},
		filters:{
			dateDiff,
			formatTime
		},
		mounted(){
			this.ces()
		},
		methods:{
			
		async ces(){
				const verInfo = await systemAPI.latestVersion({type:1,version:66});
				console.log(verInfo,'嗡嗡嗡嗡嗡嗡');
			},
			onOpen(){
				this.$emit('open',this.conversation.id)
			},
			onClick(cidx,oidx){
				const opt = this.options[oidx]
				this.$emit(opt.event,this.index)
			},
			toChat(item){
				this.$emit('toChat',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat{
		display: flex;
		padding: 26rpx 30rpx;
		width: 750rpx;
		.avatar{
			flex-shrink: 0;
			position: relative;
			.badge{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 24rpx;
				line-height: 30rpx;
				background-color: #fa3534;
				color: #ffffff;
				text-align: center;
				padding: 0rpx 8rpx;
				border-radius: 100rpx;
				min-width: 30rpx;
				transform: translate(50%,-50%);
				&.gray{
					background-color: #909399;
				}
			}
			
		}
		.content{
			flex: 1;
			width: 200rpx;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.msg{
			line-height: 1;
		}
	}
</style>